var swiper = new Swiper('.swiper-container', {
  spaceBetween: 30,
  centeredSlides: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});  


var text = document.querySelector('input')
var sbtn = document.querySelector('.sous')
var flag = true

text.onmouseover =function(){
  flag = !flag

  if(flag){
    sbtn.style.display='block'
  }else{
    sbtn.style.display='none'
  }
}



// 渲染的列表
// 所有和请求相关的参数信息
const info = {
  current: 1,
  pagesize: 8,
  search: '',
  filter: '',
  saleType: 10,
  sortType: 'id',
  sortMethod: 'ASC',
  category: ''
}

var contentBox = document.querySelector('.content')

getGoodsList()
async function getGoodsList(){
  // 3-1.把info对象转换成 查询字符串
  const data = querystringify(info)

  // 3-2.发送请求
  const res = await pAjax({
    url:'http://localhost:8888/goods/list',
    data:data,
    dataType:'json'
  })

  console.log(res)

  // 3-3.给total赋值
  total = res.total
  
  // 3-4渲染商品列表
  let str = ''
  res.list.forEach(item =>{
    str +=`
    <li>
    <div class="show">
      <img data-id="${ item.goods_id } "src="${item.img_big_logo}" alt="">
      <span class="hot${ item.is_hot ? 'active' : '' }"> HOT </span>
      <span class="sale${ item.is_sale ? 'active' : '' }"> SALE </span>
    </div>
    <div class="info">
      <p class="title">${item.title}</p>
      <p>
        折扣: ${item.sale_type}
      </p>
      <p class="price">
        <del class="old"> ￥${item.price}</del>
        <span class="current"> ￥${item.current_price}</span>
      </p>
      <p>
        <button>加入购物车</button>
      </p>
    </div>
  </li>
    `
  })
  contentBox.innerHTML = str
  // console.log(str)
}


// 楼层导航
$('.Back_top ').click(function(){
  $('html ,body').animate({scrollTop: 0}, 300);
  return false;   
}); 

// 判断卷去高度大于300 回到顶部按钮显示
$(window).scroll(function () {
  const scroll_top = document.documentElement.scrollTop || document.body.scrollTop

  if(scroll_top >= 300){
    $('.Back_top').css('display','block')
  }else{
    $('.Back_top').css('display','none')
  }
})

// 点击图片跳转列表
$('.show').click(function(){
  console.log('111')
})
